<template>
  <div id="worksLiat">
    <div class="recruitJobCon">
      <div class="worksDetailNavInfo">
        <div><p @click="handelBackMegagame()">技能大赛</p><span>&gt;</span><p>获奖作品分析列表</p></div>
      </div>
      <div class="worksLiatScreen">
        <div class="worksLiatScreenItem">
          <span>工作室：</span>
          <label style="display: inline-block;">
            <user-select :option="studioNameData" :showRadio="true" @change="onStudioName($event)"></user-select>
          </label>
        </div>
        <div class="worksLiatScreenItem">
          <span>作品分类：</span>
          <label style="display: inline-block;">
            <user-select :option="worksClassifyData" :showRadio="true" @change="onWorksClassifyData($event)"></user-select>
          </label>
        </div>
        <div class="worksLiatScreenItem">
          <span>作品名称：</span>
          <label class="worksLiatScreenItemLabel" for="worksNameId">
            <input id="worksNameId" type="text" placeholder="请输入作品名称" v-model="worksName" @keydown.enter="fetchSelectAwardListMore()">
          </label>
        </div>
        <div class="worksLiatScreenItem">
          <span>作品年份：</span>
          <label class="worksLiatScreenItemLabel" for="worksCreateTimeId">
            <input id="worksCreateTimeId" type="text" placeholder="请输入作品年份" v-model="worksCreateTime" @keydown.enter="fetchSelectAwardListMore()">
          </label>
        </div>
        <div class="worksLiatScreenItem">
          <div class="btnBox">
            <button class="btnDef" @click="fetchSelectAwardListMore()">搜索</button>
          </div>
        </div>
      </div>
      <div class="stylistInfoCourseList stylistInfoList">
        <ul>
          <li v-for="(item, index) in carryPrize" :key="index" @click="jumpTo('/worksDetail?sceneType=acquirePrize&worksId=' + item.id)">
          <!-- <li v-for="(item, index) in carryPrize.records" :key="index" @click="jumpTo('/worksDetail?sceneType=acquirePrize&worksId=' + item.id)"> -->
            <img :src="$globalImageUrl + item.literatureImg" alt="">
            <div style="padding: .05rem;">
              <h2>{{item.literatureName}}</h2>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import userSelect from '../../../components/userSelect/userSelect'

export default {
  name: 'worksLiat',
  components: {
    userSelect
  },
  data () {
    return {
      studioNameData: [],
      worksClassifyData: [],
      carryPrize: [],
      studioNameId: '',
      worksClassifyId: '',
      worksName: '',
      worksCreateTime: ''
    }
  },
  created () {
    this.fetchSkillStudioList()
    this.fetchSkillSelectClassify()
    this.fetchSelectAwardListMore()
  },
  methods: {
    // 大赛工作室名称列表选择
    onStudioName (e) {
      for (let i = 0; i < this.studioNameData.length; i++) {
        if (this.studioNameData[i].label === e) {
          this.studioNameId = this.studioNameData[i].value
          break
        }
      }
    },
    // 返回技能大赛
    handelBackMegagame () {
      this.$router.push('/megagame')
    },
    // 作品分类列表选择
    onWorksClassifyData (e) {
      for (let i = 0; i < this.worksClassifyData.length; i++) {
        if (this.worksClassifyData[i].label === e) {
          this.worksClassifyId = this.worksClassifyData[i].value
          break
        }
      }
    },
    // 大赛工作室名称列表
    fetchSkillStudioList () {
      this.$api.getSkillStudioList({
      }).then(res => {
        if (res.code === 0) {
          // this.studioNameData = res.data
          for (let i = 0; i < res.data.length; i++) {
            this.studioNameData.push({
              label: res.data[i].studioName,
              value: res.data[i].id
            })
          }
        }
      })
    },
    // 获取作品分类列表
    fetchSkillSelectClassify () {
      this.$api.getSkillSelectClassify({
      }).then(res => {
        if (res.code === 0) {
          // this.worksClassifyData = res.data
          for (let i = 0; i < res.data.length; i++) {
            this.worksClassifyData.push({
              label: res.data[i].classifyName,
              value: res.data[i].classifyId
            })
          }
        }
      })
    },
    // 获取获奖作品分析列表
    /*
    * @param awardWorkName 作品名称
    * @param categoryId    作品分类id
    * @param searchTime    作品年份
    * @param studioId      工作室id
    * @param pageNum       分页信息
    */
    fetchSelectAwardListMore () {
      // if (this.worksName === '') {
      //   this.$vux.toast.text('请输入作品名称')
      //   return
      // }
      // if (this.worksClassifyId === '') {
      //   this.$vux.toast.text('请选择作品分类')
      //   return
      // }
      // if (this.worksCreateTime === '') {
      //   this.$vux.toast.text('请输入作品年份')
      //   return
      // }
      // if (this.studioNameId === '') {
      //   this.$vux.toast.text('请选择工作室')
      //   return
      // }
      this.$api.getSelectAwardListMore({
        awardWorkName: this.worksName,
        categoryId: this.worksClassifyId,
        searchTime: this.worksCreateTime,
        studioId: this.studioNameId,
        pageNum: 1
      }).then(res => {
        if (res.code === 0) {
          this.carryPrize = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#worksLiat{
  .recruitJobCon{
    width: 1200px;
    margin: auto;
    padding: .5rem 0;
  }
  .worksLiatScreen{
    /*padding-bottom: .2rem;*/
    text-align: center;
    .worksLiatScreenItem{
      display: inline-block;
      padding-right: .2rem;
      padding-bottom: .2rem;
      vertical-align: middle;
      span{
        display: inline-block;
      }
      .worksLiatScreenItemLabel{
        display: inline-block;
        width: 2rem;
        border: 1px solid #ccc;
        border-radius: 0.05rem;
        padding: 0 0.1rem;
        line-height: 0.4rem;
        height: 0.4rem;
        background-color: #fff;
        font-size: 0;
        vertical-align: middle;
        input{
          display: inline-block;
          width: 100%;
          height: 100%;
          font-size: 0.16rem;
          font-weight: 500;
          color: #333;
          line-height: 0.24rem;
          background-color: #fff;
        }
      }
      .btnBox{
        .btnDef{
          width: 1.5rem;
        }
      }
    }
  }
  .stylistInfoCourseList{
    background-color: #fff;
    ul{
      li{
        h2{
          font-size: .2rem;
          font-weight: 500;
          color: #333;
          line-height: .28rem;
        }
        span{
          font-size: .14rem;
          font-weight: 500;
          color: #999;
          line-height: .22rem;
          display: block;
        }
        p{
          font-size: .2rem;
          font-weight: 500;
          color: #333;
          line-height: .28rem;
          padding: 0;
          vertical-align: middle;
          height: .4rem;
          sub{
            display: inline-block;
            font-size: .14rem;
            font-weight: 500;
            color: #999;
            line-height: .22rem;
            vertical-align: middle;
            text-decoration: line-through;
            padding-left: .1rem;
          }
          button{
            line-height: .28rem;
            vertical-align: middle;
            font-size: .14rem;
            font-weight: 500;
            color: #fff;
            background-color: #15A29C;
            text-align: center;
            border-radius: .05rem;
            border: 1px solid #15A29C;
            outline: none;
            padding: 0 .05rem;
          }
        }
      }
    }
  }
  .stylistInfoList{
    ul{
      padding: .2rem;
      li:nth-child(5n) {
        margin-right: 0;
      }
      li:nth-last-child(-n + 5) {
        margin-bottom: 0;
      }
      li{
        display: inline-block;
        margin-right: .2rem;
        margin-bottom: .2rem;
        box-shadow: 0 0 10px #ccc;
        width: 2.16rem;
        img{
          width: 2.16rem;
          height: 1.8rem;
          display: inline-block;
        }
        p{
          font-size: .2rem;
          font-weight: 500;
          color: #333;
          line-height: .28rem;
          padding: .05rem;
        }
      }
    }
  }
}
</style>
